<template>
  <el-row :gutter="20">
    <el-col :span="6" :xs="24">
      <el-card class="app-user-card-item app-user-info">
        <div class="user-profile">
          <div class="user-photo">
            <span className="avatar-container">
              <el-avatar class="avatar" :size="size" :src="userForm.avatar" />
            </span>
            <div class="name" v-html="userForm.nickname"></div>
            <div class="slogon" v-html="userForm.description"></div>
            <div class="role">
              <template v-if="userForm.isadmin == 1">管理员</template>
              <template v-else>普通成员</template>
            </div>
          </div>
          <div class="user-info">
            <ul class="user-info-list">
              <li><i-ep-calendar class="fa" />1995/5/5</li>
              <li>
                <i-ep-male class="fa" />
                <template v-if="userForm.sex == 1">男</template>
                <template v-else>女</template>
              </li>
              <li><i-ep-location class="fa" />集团 - 事业群 - 技术部</li>
              <li><i-ep-location class="fa" /><b v-html="userForm.address"></b></li>
              <li><i-ep-eleme class="fa" />JavaScript、Vue、Node</li>
            </ul>
          </div>
        </div>
      </el-card>
    </el-col>

    <el-col :span="18" :xs="24">
      <el-card class="app-user-card-item app-user-options">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="基础信息" name="base">
            <el-form ref="userFormRef" class="app-user-form" :model="userForm" label-width="80px">
              <el-form-item label="邮箱">
                <el-input v-model="userForm.email" />
              </el-form-item>
              <el-form-item label="昵称">
                <el-input v-model="userForm.nickname" />
              </el-form-item>
              <el-form-item label="位置">
                <el-input v-model="userForm.address" />
              </el-form-item>
              <el-form-item label="性别">
                <el-radio v-model="userForm.sex" :label="1">男</el-radio>
                <el-radio v-model="userForm.sex" :label="0">女</el-radio>
              </el-form-item>
              <el-form-item label="个人简介">
                <el-input type="textarea" v-model="userForm.description" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">保存</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="安全设置" name="safe">
            <ul class="app-user-setting">
              <li class="item">
                <div class="body">
                  <div class="title">账户密码</div>
                  <div class="desc">当前密码强度：强</div>
                </div>
                <div class="action">
                  <el-button @click="handleUpdate">修改</el-button>
                </div>
              </li>
              <li class="item">
                <div class="body">
                  <div class="title">密保手机</div>
                  <div class="desc">已绑定手机：152****3441</div>
                </div>
                <div class="action">
                  <el-button @click="handleUpdate">修改</el-button>
                </div>
              </li>
              <li class="item">
                <div class="body">
                  <div class="title">备用邮箱</div>
                  <div class="desc">当前未绑定备用邮箱</div>
                </div>
                <div class="action">
                  <el-button @click="handleUpdate">修改</el-button>
                </div>
              </li>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
import { StoreUserKey } from '@/config'
import { localGet } from '@/utils'

const size = 100
const activeTab = ref('base')
const userForm = reactive(localGet(StoreUserKey))
console.log('userForm', userForm)
const onSubmit = () => {}
const handleUpdate = () => {}
</script>
